<template>
  <div>
    <div :loading="loading" class="app-container">
      <!--对象操作-->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Back" @click="handleBack">
            返回
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="Edit"
            @click="handleEdit"
            v-hasPermi="['tms:testreport:edit']"
            >修改
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="Delete"
            @click="handleDelete"
            v-hasPermi="['tms:testreport:delete']"
            >删除
          </el-button>
        </el-col>

        <y-history-toolbar
          :prefix="form.prefix"
          :historys="historys"
          :command="handleCommand"
        />
      </el-row>

      <!-- 信息展示 -->
      <el-row :gutter="10">
        <!-- 左侧详情展示 -->
        <el-col :lg="16" :xs="24">
          <!-- 测试概述 -->
          <el-card>
            <div class="card-header">
              <h4><strong>测试概述</strong></h4>
            </div>
            <div class="card-body">
              <el-text>
                共 {{ form.reqs_count }} 个研发需求，用例覆盖率
                {{ form.reqs_coverage }}。<br />
                共测试了1个版本。共有{{
                  form.cases_count
                }}个用例，共执行0个用例，产生了0个结果，失败的用例有0个。<br />
                共发现0个Bug ， 遗留0个Bug 。 重新激活0个Bug 。
                用例执行产生0个Bug 。 有效Bug率（方案为已解决或延期 /
                状态为已解决或已关闭）：0%，用例发现Bug率（用例创建的Bug /
                发现Bug数）：0%
              </el-text>
            </div>
          </el-card>
          <br />
          <reqs-card
            :testplan="form.testplan ? form.testplan.value : null"
            title="测试范围"
          />
          <br />
          <bugs-card
            :testplan="form.testplan ? form.testplan.value : null"
            title="测试缺陷"
          />
          <br />
          <cases-card
            :testplan="form.testplan ? form.testplan.value : null"
            title="测试用例"
          />
          <br />
          <bugs-card
            :testplan="form.testplan ? form.testplan.value : null"
            title="遗留缺陷"
          />
          <br />
          <!-- 分析统计 -->
          <el-card>
            <div class="card-header">
              <h4><strong>分析统计</strong></h4>
            </div>
            <div class="card-body">
              <el-row>
                <el-col :lg="24" :xs="12">
                  <y-basic-pie-chart
                    title="按用例结果统计"
                    :data="form.cases_status"
                  />
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="24" :xs="12">
                  <y-basic-pie-chart
                    title="按用例类型统计"
                    :data="form.cases_type"
                  />
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="24" :xs="12">
                  <y-basic-pie-chart
                    title="按用例模块统计"
                    :data="form.cases_module"
                  />
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="24" :xs="12">
                  <y-basic-pie-chart
                    title="按用例执行人统计"
                    :data="form.cases_executor"
                  />
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="24" :xs="12">
                  <y-basic-bar-chart
                    title="缺陷严重级别分布"
                    :data="form.bugs_gravity"
                  />
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="24" :xs="12">
                  <y-basic-bar-chart
                    title="缺陷类型分布"
                    :data="form.bugs_type"
                  />
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="24" :xs="12">
                  <y-basic-bar-chart
                    title="缺陷状态分布"
                    :data="form.bugs_status"
                  />
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="24" :xs="12">
                  <y-basic-bar-chart
                    title="缺陷解决方案分布"
                    :data="form.bugs_resolved_type"
                  />
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="24" :xs="12">
                  <y-basic-bar-chart
                    title="缺陷模块分布"
                    :data="form.bugs_module"
                  />
                </el-col>
              </el-row>
              <el-row>
                <el-col :lg="24" :xs="12">
                  <y-basic-bar-chart
                    title="缺陷创建者分布"
                    :data="form.bugs_creator"
                  />
                </el-col>
              </el-row>
            </div>
          </el-card>
          <br />
          <!-- 测试总结 -->
          <el-card>
            <div class="card-header">
              <h4><strong>测试总结</strong></h4>
            </div>
            <div class="card-body">
              <div v-html="form.remark"></div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧属性展示 -->
        <el-col :lg="8" :xs="8">
          <el-card>
            <el-tabs v-model="activeName">
              <el-tab-pane label="基本信息" name="1">
                <el-descriptions direction="vertical" :column="1" border>
                  <el-descriptions-item label="报告名称">{{
                    form.name
                  }}</el-descriptions-item>
                  <el-descriptions-item label="所属产品">
                    <router-link
                      v-if="form.product"
                      :to="'/pms/product-info/index/' + form.product.value"
                      class="link-type"
                    >
                      <span>{{ form.product.label }}</span>
                    </router-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="测试报告">
                    <router-link
                      v-if="form.testplan"
                      :to="'/tms/testplan-info/index/' + form.testplan.value"
                      class="link-type"
                    >
                      <span>{{ form.testplan.label }}</span>
                    </router-link>
                  </el-descriptions-item>
                  <el-descriptions-item label="开始时间">{{
                    form.start_time
                  }}</el-descriptions-item>
                  <el-descriptions-item label="结束时间">{{
                    form.end_time
                  }}</el-descriptions-item>
                  <el-descriptions-item label="创建人">{{
                    form.creator_name
                  }}</el-descriptions-item>
                  <el-descriptions-item label="创建时间">{{
                    form.create_time
                  }}</el-descriptions-item>
                  <el-descriptions-item label="状态">
                    <y-dict-tag
                      :options="sys_enable_disable"
                      :value="form.status"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="标签">
                    <y-tag v-model="form.tags" :editable="false" />
                  </el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </el-card>
          <br />
          <el-card>
            <div class="card-header">
              <h4><strong>操作记录</strong></h4>
            </div>
            <div class="card-body">
              <el-collapse>
                <el-collapse-item
                  v-for="record in form.history"
                  :title="record.title"
                >
                  <li v-for="sub in record.content">
                    {{ sub }}
                  </li>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <au-report
      :id="id"
      v-model="open"
      :title="title"
      :operate="operate"
      :getMethod="getTestReport"
      :updateMethod="updateTestReport"
      @submited="submited"
      @close="open = false"
    >
    </au-report>
  </div>
</template>

<script setup name="TestReportInfo">
import {
  getTestReport,
  updateTestReport,
  delTestReport,
  getHistory,
} from "@/api/tms/testreport";
import AuReport from "./components/AuReport";
import ReqsCard from "@/views/pms/requirement/components/ReqsCard";
import CasesCard from "@/views/tms/testcase/components/CasesCard";
import BugsCard from "@/views/tms/bug/components/BugsCard";

const { proxy } = getCurrentInstance();
const { sys_enable_disable } = proxy.useDict("sys_enable_disable");

const id = ref(null);
const open = ref(false);
const title = ref("");
const loading = ref(false);
const operate = ref("update");
const activeName = ref("1");
const historys = ref([]);

const data = reactive({
  form: {
    cases_status: [],
    cases_type: [],
    cases_module: [],
    cases_executor: [],
    bugs_gravity: [],
    bugs_type: [],
    bugs_status: [],
    bugs_resolved_type: [],
    bugs_module: [],
    bugs_creator: [],
  },
});

const { form } = toRefs(data);

/** 获取报告详情 */
async function getInfo() {
  try {
    // 显示加载状态
    loading.value = true;

    // 获取报告ID
    const id = proxy.$route.params.id;

    // 等待获取测试报告数据
    const reportResponse = await getTestReport(id);
    form.value = reportResponse.data;

    // 等待获取历史数据
    const historyResponse = await getHistory(id);
    historys.value = historyResponse.data;

    // 所有异步操作完成后，关闭加载状态
    loading.value = false;
  } catch (error) {
    // 处理错误，例如显示错误消息或记录日志
    console.error("Failed to fetch report or history:", error);
    // 根据需要设置loading状态
    loading.value = false;
  }
}

/** 查询某条历史记录 */
function handleCommand(command) {
  form.value = command;
}

/** 返回按钮操作 */
function handleBack() {
  proxy.$router.back();
}

/** 修改操作 */
function handleEdit() {
  open.value = true;
  title.value = "修改报告";
}

/** 删除按钮操作 */
function handleDelete() {
  proxy.$modal
    .confirm('是否确认删除报告名称为"' + form.value.name + '"的数据项?')
    .then(() => {
      return delTestReport(form.value.id);
    })
    .then(() => {
      proxy.$modal.msgSuccess("删除成功");
      handleBack();
    })
    .catch(() => {});
}

/** 添加/修改对象后触发事件 */
function submited() {
  getInfo();
}

onMounted(async () => {
  getInfo();
});
</script>

<style></style>
